<template>
  <div class="line-list">
    <div>
      <Button type="primary" @click="addLine()">新增配置</Button>
      <Select v-model="type" style="width:200px" @on-change="getBusList()">
        <Option v-for="item in typeList" :value="item.ename" :key="item.cname">{{ item.cname }}</Option>
      </Select>
    </div>
    <div>
      <Table class="list-content" :columns="columns7" :data="lineData">
        <template slot-scope="{ row }" slot="action">
          <div class="table-form-action-box">
            <span
              class="table-blue action-btn"
              style="margin-right: 10px;"
              @click="toDetail(row)"
            >编辑</span>
            <span class="table-green" @click="getBusKeys(row)">版本</span>
          </div>
        </template>
      </Table>
    </div>
    <Modal v-model="modalShow" title="版本选择" @on-ok="chooseVersion()" @on-cancel="cancel">
      <Select v-model="version" style="width:400px">
        <Option
          v-for="item in historyVersionList"
          :value="item.version"
          :key="item.version"
        >{{ item.markPage }}</Option>
      </Select>
    </Modal>
  </div>
</template>

<script>
import { getList, getKeys, chooseVersion, getListDetail } from 'http/api/linemanage';

export default {
  name: 'LineList',
  data () {
    return {
      modelId: '',
      version: '',
      modalShow: false,
      historyVersionList: [],
      versionList: [],
      type: 'task',
      typeList: [{ cname: '业务线', ename: 'task' }, { cname: '勋章', ename: 'medal' }],
      columns7: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: 'modeName',
          key: 'modeName',
          width: 300
        },
        {
          title: 'modelId',
          key: 'modelId'
        },
        {
          title: '描述',
          key: 'describe'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          slot: 'action'
        }
      ],
      lineData: []
    };
  },

  methods: {
    chooseVersion () {
      // this.version = this.version.replace(/[^0-9]/ig, '')// 截取版本号
      chooseVersion({ modelId: this.modelId, version: this.version })
        .then(res => {
          if (res) {
            this.$Message.success('版本更新成功');
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    cancel () { },
    getCurrentVersion (modelId, value) { // 获取当前的版本
      getListDetail(modelId)
        .then(res => {
          if (res.data.views.viewMarkPage !== '') {
            let markPage = res.data.views.viewMarkPage;
            for (let i = 0; i < value.length; i++) {
              if (value[i].views.viewMarkPage === markPage) {
                this.version = value[i].version;
              }
            }
          } else {
            this.version = '';
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    getBusKeys (row) {
      this.modelId = row.modelId;
      getKeys(this.modelId)
        .then(res => {
          if (res) {
            this.modalShow = true;
            this.historyVersionList = [];
            for (let i = 0; i < res.data.length; i++) {
              let item = res.data[i].views;
              this.historyVersionList.push({ version: res.data[i].version, markPage: item.viewMarkPage });
            }
            this.historyVersionList = this.historyVersionList.sort(function (a, b) {
              a = a.markPage.replace(/[^0-9]/ig, '');
              b = b.markPage.replace(/[^0-9]/ig, '');
              return b * 1 - a * 1;
            });
            this.getCurrentVersion(this.modelId, res.data)
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 业务线详情
    toDetail (row) {
      this.$router.push({ path: '/home/linemanage/linedetail?modelId=' + row.modelId + '&edit=edit' + '&modelType=' + row.modelType });
    },
    // 新建业务线
    addLine () {
      this.$router.push({ path: '/home/linemanage/linedetail' });
    },
    getBusList () {
      getList({ type: this.type }).then(res => {
        if (res) {
          this.lineData = res.data;
        }
      })
        .catch(err => {
          this.$Message.error(err);
        })
    }
  },
  mounted () {
    this.getBusList();
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.line-list {
  padding: 20px;
  .list-content {
    margin: 20px 0;
  }
}
</style>

<style lang="less">
</style>
